<template>

  <!-- 
    provide 用来传值  不能实现响应式
    inject  用来接收值

   -->


  <div>
    <p>Provide/inject 中的a: {{a}} </p>
    <button @click="a++">改变a</button>
    <child/>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      a:1,
      b:2,
      c:3
    }
  },
  methods:{
    changeA(num){
      this.a += num
    }
  },

  // provide函数写法
  provide(){
    return{
      a:this.a,
      b:this.b,
      c:this.c,
      changeA:this.changeA
    }
  }
}
</script>

<style scoped>
div{
  color: tomato;
}
</style>